const path = require('path')
// 导入插件
const MiniCssPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 入口文件
    entry: './src/main.js',
    // 构建模式设置为开发模式，mode可以配置为production（默认）、development或none，也可以通过启动Webpack时从命令行传入 webpack --mode=production
    mode: 'development',
    // 指定src目录为应用入口目录
    // context:path.resolve(__dirname,'src'),
    // 配置输出文件的名称，这些输出文件将写入到output.path选项指定的目录下
    output: {
        // 构建后的文件名,对于单个入口的应用，filename可以指定为固定的值，比如bundle.js
        filename: "bundle.js",
/*        对于多个入口的项目，就需要借助Webpack提供的占位符了。比如下面的Entry配置了三个入口，输出结果得到三个文件
        entry: {
            main: './src/main',
            second: './src/second',
            third: './src/third',
        },
        filename: '[name].js',*/
        // 构建后文件的存放目录, 必须使用绝对路径
        path: path.resolve(__dirname, './build')
    },
    module: {
        rules: [
            // 将 style-loader 替换为 MiniCssPlugin 提供的 loader
            {
                test: /\.css$/,
                use: [MiniCssPlugin.loader, 'css-loader']
            },
            // 以 gif/png/jpg 结尾的文件应用下面的 loader
            {
                test: /\.(gif|jpg|png)$/,
                use: [{
                    loader: "file-loader",
                    options: {
                        // 构建文件名和目录设置
                        name: 'images/{name}.{ext}',
                        // 是否启用 ES6模块系统，本项目未启用
                        esModule: false,
                        // 输出的根目录
                        // publicPath: 'build',
                    }
                }]
            },
        ]
    },
    // 开发服务器配置
    devServer: {
        // URL的目录
        contentBase: path.resolve(__dirname, 'build'),
        // DevServer的 HTTP服务端口
        port: 8080
    },
    plugins: [
        // 实例化MiniCssPlugin
        new MiniCssPlugin({
            // 输出的CSS文件名
            // filename: 'css/[name].css',
            filename: 'css/main.css',
        }),
        // 实例化 HtmlWebpackPlugin
        new HtmlWebpackPlugin({
            chunks: ['main'],
            // 构建后的文件名
            filename: "index.html",
            // 源文件名
            template: "index.html"
        })
    ]
};
